<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Bootstrap 实例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../../js/page.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</head>

<body>
    <section class="container">
        <h3>
            提示框，弹出框
        </h3>
        <p>
            主要用于更多内容的提示，在鼠标移动到元素上显示，鼠标移到元素外就消失，或在鼠标点击到元素后显示
        </p>
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">简单提示</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <a href="javascript:;" data-toggle="tooltip" data-placement="top" title="提示内容!">向上</a>
                    <a href="javascript:;" data-toggle="tooltip" data-placement="bottom" title="提示内容!">向下</a>
                    <a href="javascript:;" data-toggle="tooltip" data-placement="left" title="提示内容!">向左</a>
                    <a href="javascript:;" data-toggle="tooltip" data-placement="right" title="提示内容!">向右</a>
                </div>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">标题内容提示</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                        <a href="javascript:;" title="Header" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="Content">向上</a>
                        <a href="javascript:;" title="Header" data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="Content">向下</a>
                        <a href="javascript:;" title="Header" data-trigger="hover" data-toggle="popover" data-placement="left" data-content="Content">向左</a>
                        <a href="javascript:;" title="Header" data-trigger="hover" data-toggle="popover" data-placement="right" data-content="Content">向右</a>
                </div>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">点击内容提示</h5>
            </div>
            <div class="card-body">
                <a href="javascript:;" title="Header" data-toggle="popover" data-placement="top" data-content="Content">向上</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">向下</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-placement="left" data-content="Content">向左</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-placement="right" data-content="Content">向右</a>
            </div>
        </div>
        <!-- item end-->
        <!-- item -->
        <div class="card my-4">
            <div class="card-header">
                <h5 class="text-primary">点击其他取消</h5>
            </div>
            <div class="card-body">
                <a href="javascript:;" title="Header" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Content">向上</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-content="Content">向下</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Content">向左</a>
                <a href="javascript:;" title="Header" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Content">向右</a>
            </div>
        </div>
        <!-- item end-->


    </section>
    <script>
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>

</body>

</html>